<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function loadCity() {
            let province = document.getElementById("province");
            let city = document.getElementById("city");

            // 定义一个二维数组
            let arr = new Array();
            // 该数组中的每一个元素对应一个省份下拉列中所有Option对象
            arr[0] = [new Option("请选择城市", "-1")];
            arr[1] = [new Option("请选择城市", "-1"), new Option("南京", "1"), new Option("苏州", "2"), new Option("无锡", "3"), new Option("常州", "4"), new Option("扬州", "5"), new Option("泰州", "6"), new Option("徐州", "7"), new Option("盐城", "8"), new Option("连云港", "9")];
            arr[2] = [new Option("请选择城市", "-1"), new Option("杭州", "1"), new Option("宁波", "2"), new Option("温州", "3"), new Option("嘉兴", "4"), new Option("绍兴", "5")];
            arr[3] = [new Option("请选择城市", "-1"), new Option("合肥", "1"), new Option("马鞍山", "2"), new Option("六安", "3"), new Option("芜湖", "4"), new Option("滁州", "5"), new Option("铜陵", "6"), new Option("淮南", "7"), new Option("蚌埠", "8")];

            // 获取用户所选择的省份下拉列的选项
            let index = province.selectedIndex;

            // 加载之前清空原来的选项
            city.length = 0;

            // 根据所选的省份选项,加载对应的城市选项
            for (let i = 0; i < arr[index].length; i++) {
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">请选择省份</option>
    <option value="1">江苏省</option>
    <option value="2">浙江省</option>
    <option value="3">安徽省</option>
</select>
<!--
    城市下拉列初始没有城市,需要在省份中选择对应省份后才会生成对应的城市
    如果选择江苏,则展示江苏的城市,例如:南京、苏州、无锡、常州、扬州、泰州、徐州、盐城、连云港
    如果选择浙江,则展示浙江的城市,例如:杭州、宁波、温州、嘉兴、绍兴
    如果选择安徽,则展示安徽的城市,例如:合肥、马鞍山、六安、芜湖、滁州、铜陵、淮南、蚌埠
-->
<select id="city">
    <option value="-1">请选择城市</option>
</select>
</body>
</html>